<template>
    <div class="box">
        <headers title="搜索 "></headers>
        <van-search v-model="title" placeholder="请输入搜索关键词" />
        <div v-if="list.length > 0">
            <van-pull-refresh v-model="loading" @refresh="onRefresh">

                <van-card v-for="(v, i) in list" :key="i" :num="v.goods_number" :price="v.goods_price"
                    :title="v.goods_name"
                    :thumb="v.goods_big_logo ? v.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                    @click="todetail(v.goods_id)" />

            </van-pull-refresh>
        </div>
        <div v-else>
            <van-empty description="暂无数据" />
        </div>

    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { swiperdataApi, catitemsApi, categoriesApi, searchApi, detailApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

import headers from '@/components/headers.vue';

let title = ref(route.query.name);

let list = ref([]);
const getsearchApi = () => {
    searchApi(title.value).then((res) => {
        list.value = res.data.message.goods;
    })
}
getsearchApi();


import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        // count.value++;
        getsearchApi()
    }, 1000);
};

watch(title, (newValue, oldValue) => {
    getsearchApi()
})

const todetail = (goods_id) => {
    router.push({ path: '/detail', query: { goods_id: goods_id } })
}


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>